<template>
	<div class="all">
		<div class="container">
			<vue-scroll :ops="scollOptions">
				<div class="create-developer-table">
					<div class="header">
						<el-form
							slot="body"
							:inline="true"
							:model="searchForm"
							label-position="left"
							class="search-form"
						>
							<el-form-item label="商品名称:">
								<el-input
									v-model="searchForm.name"
									placeholder="请输入"
									clearable
									size="mini"
								/>
							</el-form-item>
							<el-form-item label="商品类别:">
								<el-select
									size="mini"
									clearable
									v-model="searchForm.category_id"
									placeholder="请选择"
								>
									<el-option
										v-for="item in categoryList"
										:key="item.id"
										:label="item.category_name"
										:value="item.id"
									>
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="">
								<el-button
									type="primary"
									size="mini"
									@click.native="getTableData"
								>
									搜索
								</el-button>
							</el-form-item>
						</el-form>
					</div>
					<div class="developerTable">
						<page-table
							ref="pageTable"
							:table-data="table.tbodyData"
							:header-data="table.headerData"
							:page-data="pageData"
							cell-key=""
							@handle-current-change="handleCurrentChange"
							@handle-size-change="handleSizeChange"
						>
							<template
								slot="operate"
								slot-scope="scope"
							>
								<span>
									<a
										class="text"
										@click="edit(scope.data, 2)"
										>通过</a
									>
									<a
										class="text"
										@click="edit(scope.data, 3)"
										>驳回</a
									>
								</span>
							</template>
							<template
								slot="goods_img"
								slot-scope="scope"
							>
								<el-image
									style="width: 100px; height: 100px"
									:src="scope.data.goods_img"
									:fit="fit"
								></el-image>
							</template>
							<template
								slot="fineness"
								slot-scope="scope"
							>
								<span>
									{{
										scope.data.fineness === 1
											? "基本报废"
											: scope.data.fineness === 2
											? "使用功能受损"
											: scope.data.fineness === 3
											? "破损严重"
											: scope.data.fineness === 4
											? "有破损"
											: scope.data.fineness === 5
											? "轻微破损"
											: scope.data.fineness === 6
											? "有明显擦痕"
											: scope.data.fineness === 7
											? "有轻微擦痕"
											: scope.data.fineness === 8
											? "有使用痕迹"
											: scope.data.fineness === 9
											? "基本全新"
											: scope.data.fineness === 10
											? "全新"
											: ""
									}}
								</span>
							</template>
							<template
								slot="price"
								slot-scope="scope"
							>
								<span>{{ scope.data.price }}元</span></template
							>
						</page-table>
					</div>
				</div>
			</vue-scroll>
		</div>
	</div>
</template>
<script>
	import PageTable from "@/components/table/PageTable";
	import { getGoodList, updateGood } from "@/api/shopping/index";
	import { getCategoryNameList } from "@/api/developerServe/index";
	import { formatDateTime } from "@/utils/tools";
	export default {
		components: {
			PageTable,
		},
		data() {
			return {
				finenessList: [
					{
						id: 1,
						name: "基本报废",
					},
					{
						id: 2,
						name: "使用功能受损",
					},
					{
						id: 3,
						name: "破损严重",
					},
					{
						id: 4,
						name: "有破损",
					},
					{
						id: 5,
						name: "轻微破损",
					},
					{
						id: 6,
						name: "有明显擦痕",
					},
					{
						id: 7,
						name: "有轻微擦痕",
					},
					{
						id: 8,
						name: "有使用痕迹",
					},
					{
						id: 9,
						name: "基本全新",
					},
					{
						id: 10,
						name: "全新",
					},
				],
				searchForm: {
					name: "",
					category_id: "",
				},
				table: {
					headerData: [
						{
							prop: "id",
							label: "商品ID",
							align: "center",
							headerAlign: "center",
						},
						{
							prop: "name",
							label: "商品名称",
							align: "center",
							headerAlign: "center",
						},
						{
							slot: "goods_img",
							label: "商品图片",
							align: "center",
							headerAlign: "center",
						},
						{
							prop: "category_name",
							label: "类别名称",
							align: "center",
							headerAlign: "center",
						},
						{
							slot: "price",
							label: "商品价格",
							align: "center",
							headerAlign: "center",
						},
						{
							slot: "fineness",
							label: "商品成色",
							align: "center",
							headerAlign: "center",
						},
						{
							prop: "user_name",
							label: "发布者",
							align: "center",
							headerAlign: "center",
						},

						{
							prop: "create_time",
							label: "创建时间",
							align: "center",
							headerAlign: "center",
						},
						{
							prop: "update_time",
							label: "修改时间",
							align: "center",
							headerAlign: "center",
						},
						{
							label: "操作",
							align: "center",
							headerAlign: "center",
							slot: "operate",
						},
					],
					tbodyData: [],
					handdleId: "",
				},
				pageData: {
					// 翻页数据
					total: 0, // 总条数
					page: 1,
					pageSize: 10,
					totalPage: 0, // 总页数
				},
				params: {
					page: 1,
					pageSize: 10,
				},
				/**
				 * 滚动条样式
				 */
				scollOptions: {
					scrollPanel: {
						scrollingX: false,
						scrollingY: true,
					},
					vuescroll: {
						mode: "native",
						sizeStrategy: "percent",
						detectResize: true,
						zooming: false,
					},
					bar: {
						onlyShowBarOnScroll: false,
						background: "#dedede",
						opacity: 1,
					},
				},
				userData: {},
				categoryList: [],
			};
		},
		created() {},
		mounted() {
			this.userData = localStorage.getItem("userData");
			this.userData = JSON.parse(this.userData);
			this.getCategoryNameList();
			this.getTableData();
		},
		methods: {
			async edit(obj, val) {
				const data = {
					id: obj.id,
					review_status: val,
					state: val == 2 ? 2 : 3,
					release_time: val == 2 ? formatDateTime(new Date()) : null,
				};
				if (val !== 2) {
					delete data.release_time;
				}
				await updateGood({ ...data });
				this.$message.success("操作成功！");
				this.getTableData();
			},
			getCategoryNameList() {
				getCategoryNameList().then((res) => {
					this.categoryList = res.data;
				});
			},

			/** 获取列表数据 */
			getTableData() {
				this.searchForm.page = this.pageData.page;
				this.searchForm.pageSize = this.pageData.pageSize;
				return getGoodList({
					...this.searchForm,
					review_status: 4,
				})
					.then((res) => {
						this.table.tbodyData = res.data.map((item) => {
							return {
								...item,
								create_time: formatDateTime(item.create_time),
								update_time: formatDateTime(item.update_time),
								release_time: item.release_time
									? formatDateTime(item.release_time)
									: "-",
								category_name:
									item.categorylist.length != 0
										? item.categorylist[0].category_name
										: "类别不存在",
								user_name:
									item.userlist.length != 0
										? item.userlist[0].name
										: "用户不存在",
							};
						});
						this.pageData = {
							...this.pageData,
							total: res.count,
							totalPage:
								res.count % this.pageData.pageSize === 0
									? res.count / this.pageData.pageSize
									: parseInt(res.count / this.pageData.pageSize) + 1,
						};
					})
					.catch(() => {});
			},
			/** 跳转至第几页的操作 */
			handleCurrentChange(val) {
				this.params.page = val;
				this.getTableData();
			},
			/** 每页条数改变 */
			handleSizeChange(val) {
				this.pageData.pageSize = val;
				this.getTableData();
			},
		},
	};
</script>
<style lang="scss" scoped>
	.all {
		width: 100%;
		height: 100%;

		.container {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			.create-developer-table {
				background-color: #ffffff;
				padding: 15px;
				.header {
					margin-bottom: 20px;
					line-height: 60px;
					/deep/ .el-form {
						.el-form-item__content {
							vertical-align: middle;
							.el-range-editor.el-input__inner {
								height: 28px;
								line-height: 28px;
								vertical-align: middle;
								.el-range__icon,
								.el-range-separator,
								.el-range__close-icon {
									line-height: 23px;
								}
							}
						}
					}
				}
				.developerTable {
					.text {
						cursor: pointer;
						color: #3179d6;
						margin: 0 5px;
					}
				}
			}
			/deep/ .el-dialog {
				width: 32%;
			}
		}
	}
	.commonPopup {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba($color: #000000, $alpha: 0.6);
	}
	.showPopup {
		right: 0px;
	}
	.hidePopup {
		right: -550px;
	}
</style>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
